import React, { Component } from "react";
import { Tree } from "antd";
import Icon from "@ant-design/icons";
import styles from "./styles/AntTree.less";
const { TreeNode } = Tree;

class AntTree extends Component {
  data = [
    {
      value: "Root",
      defaultValue: "Root",
      key: "0-1",
      parentKey: "0",
      isEditable: true,
      children: [
        {
          value: "parent 1-0",
          key: "0-1-1",
          isEditable: true,
          parentKey: "0-1",
          children: [
            {
              value: "leaf",
              key: "0-1-1-0",
              parentKey: "0-1-1",
              disableCheckbox: true,
            },
            {
              value: "leaf",
              parentKey: "0-1-1",
              key: "0-1-1-1",
            },
          ],
        },
        {
          value: "parent 1-1",
          key: "0-1-2",
          parentKey: "0-1",
          children: [
            {
              value: <span style={{ color: "#1890ff" }}>sss</span>,
              key: "0-1-2-0",
            },
          ],
        },
      ],
    },
  ];

  expandedKeys = [];

  state = {
    expandedKeys: [],
    data: this.data,
  };

  componentDidMount() {
    // Tip: Must have, or the parent node will not expand automatically when you first add a child node
    this.onExpand([]); // 手动触发，否则会遇到第一次添加子节点不展开的Bug
  }

  onExpand = (expandedKeys) => {
    console.log("onExpand", expandedKeys);
    this.expandedKeys = expandedKeys;
    this.setState({ expandedKeys: expandedKeys });
  };

  renderTreeNodes = (data) =>
    data.map((item) => {
      if (item.isEditable) {
        item.title = (
          <div>
            <input
              className={styles.inputField}
              value={item.value}
              onChange={(e) => this.onChange(e, item.key)}
            />
            <Icon
              type="close"
              style={{ marginLeft: 10 }}
              onClick={() => this.onClose(item.key, item.defaultValue)}
            />
            <Icon
              type="check"
              style={{ marginLeft: 10 }}
              onClick={() => this.onSave(item.key)}
            />
          </div>
        );
      } else {
        item.title = (
          <div className={styles.titleContainer}>
            <span>{item.value}</span>
            <span className={styles.operationField}>
              <Icon
                style={{ marginLeft: 10 }}
                type="edit"
                onClick={() => this.onEdit(item.key)}
              />
              <Icon
                style={{ marginLeft: 10 }}
                type="plus"
                onClick={() => this.onAdd(item.key)}
              />
              {item.parentKey === "0" ? null : (
                <Icon
                  style={{ marginLeft: 10 }}
                  type="minus"
                  onClick={() => this.onDelete(item.key)}
                />
              )}
            </span>
          </div>
        );
      }

      if (item.children) {
        return (
          <TreeNode title={item.title} key={item.key} dataRef={item}>
            {this.renderTreeNodes(item.children)}
          </TreeNode>
        );
      }

      return <TreeNode {...item} />;
    });

  onAdd = (e) => {
    console.log("add");
    // 防止expandedKeys重复
    // Tip: Must have, expandedKeys should not be reduplicative
    if (this.state.expandedKeys.indexOf(e) === -1) {
      this.expandedKeys.push(e);
    }
    this.addNode(e, this.data);
    this.setState({
      expandedKeys: this.expandedKeys,
      data: this.data,
    });
  };

  addNode = (key, data) =>
    data.map((item) => {
      if (item.key === key) {
        if (item.children) {
          item.children.push({
            value: "default",
            defaultValue: "default",
            key: key + Math.random(100), // 这个 key 应该是唯一的。 Tip: The key should be unique
            parentKey: key,
            isEditable: false,
          });
        } else {
          item.children = [];
          item.children.push({
            value: "default",
            defaultValue: "default",
            key: key + Math.random(100),
            parentKey: key,
            isEditable: false,
          });
        }
        return;
      }
      if (item.children) {
        this.addNode(key, item.children);
      }
    });

  onDelete = (key) => {
    console.log("delete");
    this.deleteNode(key, this.data);
    this.setState({
      data: this.data,
    });
  };

  deleteNode = (key, data) =>
    data.map((item, index) => {
      if (item.key === key) {
        data.splice(index, 1);
        return;
      } else {
        if (item.children) {
          this.deleteNode(key, item.children);
        }
      }
    });

  onEdit = (key) => {
    console.log("edit");
    this.editNode(key, this.data);
    this.setState({
      data: this.data,
    });
  };

  editNode = (key, data) =>
    data.map((item) => {
      if (item.key === key) {
        item.isEditable = true;
      } else {
        item.isEditable = false;
      }
      //Tip: Must have, when a node is editable, and you click a button to make other node editable, the node which you don't save yet will be not editable, and its value should be defaultValue
      item.value = item.defaultValue; // 当某节点处于编辑状态，并改变数据，点击编辑其他节点时，此节点变成不可编辑状态，value 需要回退到 defaultvalue
      if (item.children) {
        this.editNode(key, item.children);
      }
    });

  onClose = (key, defaultValue) => {
    console.log("close");
    this.closeNode(key, defaultValue, this.data);
    this.setState({
      data: this.data,
    });
  };

  closeNode = (key, defaultValue, data) =>
    data.map((item) => {
      item.isEditable = false;
      if (item.key === key) {
        item.value = defaultValue;
      }
      if (item.children) {
        this.closeNode(key, defaultValue, item.children);
      }
    });

  onSave = (key) => {
    console.log("save");
    this.saveNode(key, this.data);
    this.setState({
      data: this.data,
    });
  };

  saveNode = (key, data) =>
    data.map((item) => {
      if (item.key === key) {
        item.defaultValue = item.value;
      }
      if (item.children) {
        this.saveNode(key, item.children);
      }
      item.isEditable = false;
    });

  onChange = (e, key) => {
    console.log("onchange");
    this.changeNode(key, e.target.value, this.data);
    this.setState({
      data: this.data,
    });
  };

  changeNode = (key, value, data) =>
    data.map((item) => {
      if (item.key === key) {
        item.value = value;
      }
      if (item.children) {
        this.changeNode(key, value, item.children);
      }
    });

  render() {
    return (
      <div>
        <Tree
          expandedKeys={this.state.expandedKeys}
          selectedKeys={[]}
          onExpand={this.onExpand}
        >
          {this.renderTreeNodes(this.state.data)}
        </Tree>
      </div>
    );
  }
}

export default AntTree;
